<!--  -->
<template>
   <div class='orderlist'>
       <h3>订单列表</h3>
        <check-step num="2"></check-step>
       <table>
           <tr class="a">
               <th>名称</th>
               <th>图片</th>
               <th>单价</th>
               <th>数量</th>
               <th>价格</th>
           </tr>
           <tr v-for="(v,index) in list" :key="index" class="d">
               <td>{{v.productName}}</td>
               <td><img :src="'/static/'+v.productImage" :alt="v.productName"></td>
               <td>{{v.salePrice}}</td>
               <td>{{v.productNum}}</td>
               <td>{{v.salePrice*v.productNum}}</td>
           </tr>
       </table>
       <div class="initPrice"><span class="">{{initPrice}}</span></div>
       <ul class="order">
          <li>{{zhe}}折</li>
          <li><span>{{compPrice}}</span></li>
       </ul>
       <div class="btn-w">
           <a href="javascript:viod(0);" class="btn" @click.stop.prevent="buildSubmit">支付</a>
       </div>
   </div>
</template>

<script>
   import Vue from 'vue'
    import HeaderLogin from '@/components/HeaderLogin'
    import BreadNav from '@/components/BreadNav'
    import model from '@/components/model'
    import CheckStep from '@/components/CheckStep'
    import footer from '@/components/footer'
    export default {
       components: {HeaderLogin,BreadNav,model,"v-footer":footer,CheckStep},
       data() {
           return {
               list:[],
               zhe:8,
               youfei:45,
               orderId:null
           };
       },
       computed: {
           initPrice(){
               let price = 0;
               this.list.forEach(element => {
                   price +=element.productNum*element.salePrice
               });
               return price;
           },
           compPrice(){
              return (parseInt(this.initPrice))*(8)/10-45
           }
       },
       watch: {},
       methods: {
           init(){
               let _this = this;
               axios.get('/users/cartlist', {
                    params: {
                        "checked":"checked"
                    }
                })
                .then(function (response) {
                    let {errno,data} = response.data;
                    if(!errno){
                        _this.list= data;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
           },
           buildSubmit(){
               console.log(this.$route.query.addressId);
               axios.post('/users/buildCode', {
                   addressId:this.$route.query.addressId
                })
                .then(response => {
                    let {errno,msg,data} = response.data;                    
                    if(!errno){
                        this.$router.push({path: '/orderSucess', query: {orderId: data.orderId}})
                    }
                    else {
                        console.log(msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
           }
       },
       created() {

       },
       mounted() {
           this.init();
       },
       beforeCreate() {}, //生命周期 - 创建之前
       beforeMount() {}, //生命周期 - 挂载之前
       beforeUpdate() {}, //生命周期 - 更新之前
       beforeDestroy() {}, //生命周期 - 销毁之前
       activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='less'>
    .orderlist{
        width:80%;
        margin: 25px auto;
        h3{

        }
        table{
            border-bottom: 1px solid blue;
            width:80%;
            .a{width:80%;height:45px;}
            .d{width:80%;border-top:1px solid blue;}
            .d th,.d td{
                // max-height: 55%;
                height:130px;
                line-height: 10px;
                img{
                    width:100px;
                    border:1px solid black;
                    border-radius: 15px;
                }
            }
        }
        .initPrice{width:60%;margin: 17px auto;text-align: right;span{font-size: 20px;color:red;}}
        ul.order{
            width:60%;
            margin: 0 auto 0 auto;
            text-align: right;
            font-size:18px;
            li{
                 margin-bottom:10px;
                 span{
                     color:red;
                     font-size:25px;
                 }
            }
        }
        .btn-w{
            width:52%;
            margin:10px 0 0 auto;
            text-align: center;
            a{width:120px;background:red;color:#fff;font-weight: bold;font-size: 18px;}
        }
    }
</style>